
<template>

  <div class="container">
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
      <block v-for="(item, index) in movies" :index="index" :key="key">
          <swiper-item>
              <image :src="item" class="slide-image" mode="aspectFill"/>
          </swiper-item>
      </block>
    </swiper>
    <navigator url="../logs/main" class="add-content">
      <div class="add-car">
        <div class="left">
          <img src="../../static/image/car.png" alt="添加车辆">
          <div class="txt">
            <p class="title">请添加车辆</p>
            <p>完善车辆信息，享受超值服务</p>
          </div>
        </div>
        <div class="icon">
          <i class="iconfont">&#xe601;</i>
        </div>
      </div>
    </navigator>
    <div class="car-item">
      <div class="top">
        <div>
          <img src="../../static/image/car.png" alt="">
          <p>汽车保养</p>
        </div>
        <div>
          <img src="../../static/image/px.png" alt="">
          <p>钣金喷漆</p>
        </div>
      </div>
      <div class="bottom">
        <div>
          <img src="../../static/image/wx.png" alt="">
          <p>我要维修</p>
        </div>
        <div>
          <img src="../../static/image/jj.png" alt="">
          <p>紧急救援</p>
        </div>
        <div>
          <img src="../../static/image/zn.png" alt="">
          <p>智能检测</p>
        </div>
      </div>
    </div>
    <!-- <scroll-view scroll-y = true bindscrolltoupper="refesh"> -->
      <div class="car-review">
        <p>车主评论</p>
      </div>
      <div class="evaluate-content" v-for="item in evaluates">
        <div class="evaluate">
          <img :src="item.personUrl" alt="">
          <div class="evaluate-l">
            <p class="title">{{item.user}}</p>
            <p class="star-img">
              <img src="../../static/image/allStar.png" alt="">
              <img src="../../static/image/allStar.png" alt="">
              <img src="../../static/image/allStar.png" alt="">
              <img src="../../static/image/allStar.png" alt="">
            </p>
            <p class="comment">评分: <span class="num">{{item.score}}</span>分</p>
            <p>{{item.carType}}</p>
            <p>{{item.cost}}</p>
          </div>
        </div>
        <div class="evaluate-txt">
          <p>{{item.detail}}</p>
        </div>
        <div class="img-content">
          <img src="../../static/image/zn.png" alt="">
          <img src="../../static/image/zn.png" alt="">
          <img src="../../static/image/zn.png" alt="">
        </div>
        <div class="time-content">
          <p>{{item.time}}</p>
          <p>{{item.project}}</p>
        </div>
      </div>
    <!-- </scroll-view> -->

  </div>
</template>

<script>
import card from '@/components/card'

export default {
  data () {
    return {
      motto: 'Hello World',
      userInfo: {},
      movies:[
        'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
        'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
      ],
      evaluates:[
        {
          personUrl:'../../static/image/tx.png',
          user:'飞翔的茄子君',
          score:4.9,
          carType:'车型：2012款高尔夫',
          cost:'花费：200元',
          detail:'提起M270发动机大家不会感到陌生，它之前搭载于奔驰B级车型上。如今摇身一变为纵向布置版本纵置版在小排量发动机阵营中有着相当出色的技术实力。',
          time:'2018-04-30  11:05:36',
          project:'项目：常规保养'
        },
        {
          personUrl:'../../static/image/tx.png',
          user:'飞翔的茄子君',
          score:4.9,
          carType:'车型：2012款高尔夫',
          cost:'花费：200元',
          detail:'提起M270发动机大家不会感到陌生，它之前搭载于奔驰B级车型上。如今摇身一变为纵向布置版本纵置版在小排量发动机阵营中有着相当出色的技术实力。',
          time:'2018-04-30  11:05:36',
          project:'项目：常规保养'
        },
        {
          personUrl:'../../static/image/tx.png',
          user:'飞翔的茄子君',
          score:4.9,
          carType:'车型：2012款高尔夫',
          cost:'花费：200元',
          detail:'提起M270发动机大家不会感到陌生，它之前搭载于奔驰B级车型上。如今摇身一变为纵向布置版本纵置版在小排量发动机阵营中有着相当出色的技术实力。',
          time:'2018-04-30  11:05:36',
          project:'项目：常规保养'
        },
      ]
    }
  },

  components: {
    card
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    setTimeout(()=>{
      wx.hideNavigationBarLoading()
      wx.stopPullDownRefresh()
    },1000)
  },
  methods: {
    bindDateChange () {},
    bindViewTap () {
      const url = '../logs/main'
      wx.navigateTo({ url })
    },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
    },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    },
  },

  created () {
    // 调用应用实例的方法获取全局数据
    this.getUserInfo()
  }
}
</script>

<style lang="less" scoped>
.slide-image {
  width:100%;
}
.add-content {
  width:100%;
}
.add-car {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  width:100%;
  height:120rpx;
  line-height:120rpx;
  padding:0rpx 36rpx;
  box-sizing:border-box;
  .left {
    display:flex;
    flex-direction:row;
    img {
      display: inline-block;
      width:90rpx;
      height:90rpx;
      margin-top:12rpx;
      margin-right:20rpx;
    }
    .txt {
      line-height:56rpx;
      font-size:32rpx;
      .title {
        color:#EC681F;
      }
    }
    .icon{
      // margin-right:36rpx;
    }
  }
}
.car-item {
  width:100%;
  box-sizing:border-box;
  background-color:#F0F0F4;
  color:#7F8389;
  img {
    width:120rpx;
    height:120rpx;
  }
  .top,.bottom {
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    &>div{
      padding:30rpx 0;
      width:50%;
      border-right:1px solid #E5E5E5;
      border-bottom:1px solid #E5E5E5;
      text-align:center;
    }
  }
  .bottom {
    justify-content:space-between;
  }
}
// 车主评论
.car-review {
  width:100%;
  height:88rpx;
  line-height:88rpx;
  font-size:34rpx;
  padding-left:60rpx;
  border-bottom:1px solid #F0F0F4;
}
.evaluate-content {
  padding:30rpx;
  border-bottom:2rpx solid #BCBCBC;
  .evaluate {
    display:flex;
    flex-direction:row;
    border-bottom:1px solid #F0F0F4;
    font-size:26rpx;
    padding-bottom:30rpx;
    &>img {
      width:90rpx;
      height:90rpx;
    }
    .evaluate-l {
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      justify-content:space-between;
      .title {
        font-size:34rpx;
      }
      img {
        width:24rpx;
        height:24rpx;
      }
      .comment {
        .num {
          color:#EC681F;
          font-weight:bold;
        }
      }
    }
  }
  .evaluate-txt {
    font-size:26rpx;
    color:#A9A9A9;
    padding:20rpx 0 26rpx 0;
    line-height:36rpx;
  }
  .img-content {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    img {
      width:90rpx;
      height:90rpx;
    }
  }
  .time-content {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    color:#D6D6D6;
    font-size:24rpx;
  }
}


.swiper {
  width:100%;
}

</style>
